$def with(books=[], title="", url="", key="", min_books=1, load_more=None, test=False)

$ ctx.setdefault("links", [])
$# Apparently fonts always need crossorigin for some reason
$ slick_font = '<link rel="preload" href="/static/css/fonts/slick.woff" as="font" type="font/woff" crossorigin>'
$if slick_font not in ctx.links:
  $ ctx.links.append(slick_font)

$def render_carousel_cover(book, lazy):
  $ fallback_cover = 'https://openlibrary.org/images/icons/avatar_book.png'
  $ cover_host = '//covers.openlibrary.org'
  $ url = book.get('key') or book.url
  $ title = book.title

  $if book.get('cover_url'):
    $ cover_url = book.get('cover_url')
  $elif book.get('cover_id') or book.get('cover_i'):
    $ cover_url = '%s/b/id/%s-M.jpg'%(cover_host, book.get('cover_id') or book.get('cover_i'))
  $elif book.get('ia'):
    $ cover_url = '%s/b/ia/%s-M.jpg?default=%s'%(cover_host, book.get('ia')[0], fallback_cover)
  $elif book.get('cover_edition_key'):
    $ cover_url = '%s/b/olid/%s-M.jpg'%(cover_host, book.get('cover_edition_key'))
  $else:
     $ cover_url = False
  $if book.get('authors'):
    $ author_names = [author.name for author in book.authors]
    $ byline = _(' by %(name)s', name=', '.join(author_names))
  $else:
    $ byline = ''
    $ author_names = ''
  $ modifier = ''
  $ work_key = book.key if book.key.startswith('/work') else book.get('work_key')
  $if lazy:
    $ img_attr = 'data-lazy'
  $else:
    $ img_attr = 'src'

  <div class="book carousel__item">
    <div class="book-cover">
      <a href="$(url)">
        $if cover_url:
          <img class="bookcover" loading="lazy"
            width="130" height="200"
            title="$('%s%s'%(title,byline))"
            $img_attr="$(cover_url)"/>
        $else:
          <div class="carousel__item__blankcover">
            <div class="carousel__item__blankcover--title">$:macros.TruncateString(title, 70)</div>
            $if author_names:
              <div class="carousel__item__blankcover--authors">$:macros.TruncateString(', '.join(author_names), 30)</div>
          </div>
      </a>
    </div>
    <div class="book-cta">
      $:macros.LoanStatus(book, work_key=work_key, listen=False, daisy=False)
    </div>
  </div>

$if test or (books and len(books) >= min_books):
      <div class="carousel-section">
      $if title and url:
        <div class="carousel-section-header">
          <h2 class="home-h2"><a href="$url">$title</a></h2>
        </div>
      <div class="carousel-container carousel-container-decorated">
        $ attrs = ''
        $if load_more:
          $ load_more_config = {
          $  "url": load_more["url"].replace("&amp;", "&"),
          $  "pageMode": load_more.get("mode", "offset"),
          $  "limit": load_more.get("limit", 18)
          $ }
        $else:
          $ load_more_config = {}
        $ config = ['.carousel-' + key, 6, 5, 4, 3, 2, 1, load_more_config ]
        <div class="carousel carousel-$key carousel--progressively-enhanced"
          data-config="$json_encode(config)">
          $for index, book in enumerate(books or []):
              $:render_carousel_cover(book, index > 5)
        </div>
      </div>
    </div>
